import { createStore } from "vuex";
const usermanagermoudle = {
  namespaced: true,
  state: { operation: "" },
  getters: {
    getoperation(state, getters, rootState, rootGetters) {
      // let stropr = "当前用户：" + rootGetters.getloginusername + "；" + "操作：" + state.operation + "；"
      let str1 = "当前用户：";
      let str2 = "；操作：";
      let str3 = "；";
      let stroperation = "";
      stroperation = str1 + rootGetters.getloginusername;
      stroperation = stroperation + str2 + state.operation + str3;
      return stroperation;
    },
  },
  mutations: {
    setoperation(state, operation) {
      state.operation = operation;
    },
  },
  actions: {
    // setoperation({ commit, dispatch, state, getters, rootGetters, rootState},operation){
    setoperation({ commit }, operation) {
      commit("setoperation", operation);
    },
  },
};
const rootmoudles = {
  state: {
    // 状态
    // loginuser：保存数据状态的变量
    loginuser: {
      name: "",
      password: "",
    },
  },
  // 【getters】是store的计算属性。
  getters: {
    getloginusername(state) {
      return state.loginuser.name;
    },
  },
  mutations: {
    // mutation 都是同步事务
    // 数据状态保存 方法
    setloginuser(state, loginuser) {
      // console.log(...["1", "2", "3"]);
      // console.log([...["1", "2", "3"]]);
      state.loginuser.name = loginuser.name;
      state.loginuser.password = loginuser.password;
    },
  },
  // Action 类似于 mutation，不同在于：
  // Action 提交的是 mutation，而不是直接变更状态。
  // Action 可以包含任意异步操作
  actions: {
    // 乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？
    // 实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：
    // setloginuser(context, loginuser) {
    // // 这里调用的是mutations⇒setloginuser方法
    //   context.commit("setloginuser", loginuser);
    // },
    // ES2015 的 参数解构来简化代码 可以从 context 直接解构出来 { commit, dispatch, state, getters, rootGetters, rootState
    setloginuser({ commit }, loginuser) {
      setTimeout(() => {
        commit("setloginuser", loginuser);
      }, 3000);
    },
  },
  modules: { usermanagermoudle },
};

// F5 会丢失
export default createStore(rootmoudles);
// Vuex mapAction的基本使用
// mapAction-store中的异步方法
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)
// export default new Vuex.Store({
//   state: {
//     msg: 'Hello world',
//     count: 0
//   },
//   getters: {
//     reverseMsg(state) {
//       return state.msg.split('').reverse().join('')
//     }
//   }
//   mutations: {
//     increate(state, payload) {
//       state += payload
//     }
//   },
//   actions: {
//     // increateAsync(context, payload) {
//     //   setTimeout(() => {
//     //     context.commit('increate', payload)
//     //   }, 2000);
//     // }
//     // 🚀🚀 可以从 context 直接解构出来 { commit, dispatch, state, getters, rootGetters, rootState}
//     increateAsync({ commit, dispatch, state }, payload) {
//       setTimeout(() => {
//         commit('increate', payload)
//       }, 2000);
//     }
//   },
//   modules: {
//   }
// })
// vue组件
// <template>
//   <div>
//     <p>count: {{num}}</p>
//     <p>msg: {{message}}</p>
//     <p>Normal-reverseMsg: {{$store.getters.reverseMsg}}</p>
//     <p>Getter-reverseMsg: {{reverseMsg}}</p>
//     <p>Rename-msgBeReversed: {{msgBeReversed}}</p>

//     <!-- -------------------- Actions -------------------- -->
//     <button @click="this.$store.dispatch('increateAsync',2)">Actions</button>
//     <button @click="increateAsync(2)">Actions</button>

//   </div>
// </template>
// <script>
// import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// export default {
//   methods: {

//     // --------------------------- Actions
//     // this.increateAsync() 映射到 this.$store.dispatch('increateAsync')
//     ...mapActions(['increateAsync']),
//     // 💛 💛 💛 💛 💛 💛 💛 💛 💛 💛
//     // 如果是某一个module下的action,需要带上 namespace
//     // 格式: mapActions(namespace,[mutationName])
//     ...mapActions('home', ['setHomeListAsync']),
//     ...mapActions('home', { setListHomeAsync: 'setHomeListAsync' }),
//   },
//   computed: {
//     /**
//       相当于
//       num: state => state.count
//       message: state => state.msg
//      */
//     ...mapState({ num: 'count', message: 'msg' }),
//     /**
//       相当于
//       reverseMsg: getters.reverseMsg
//      */
//     ...mapGetters(['reverseMsg']),
//     /**
//       重命名,防止与组件内data数据冲突
//       相当于
//       msgBeReversed: getters.reverseMsg
//      */
//     ...mapGetters({ msgBeReversed: 'reverseMsg' }),
//   }
// }
// </script>
